<template>
	<view class="home">
		<view class="top_bar"></view>
		<view class="container">
			<view class="menu">
				<view class="menu_item border" @click="goTicket">
					<up-image :show-loading="false" src="/static/images/ticket_icon.png" width="149rpx"
						height="164rpx"></up-image>
					<up-image :show-loading="false" src="/static/images/ticket_text.png" width="71rpx" height="63rpx"
						style="margin-top: 10rpx;"></up-image>
				</view>
				<view class="menu_item" @click="goFood">
					<up-image :show-loading="false" src="/static/images/menu_icon.png" width="161rpx"
						height="168rpx"></up-image>
					<up-image :show-loading="false" src="/static/images/menu_text.png" width="71rpx" height="64rpx"
						style="margin-top: 10rpx;"></up-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onShow
} from '@dcloudio/uni-app'
import {
	getCurrentInstance, onMounted
} from 'vue';
import api from '../../api';

const goTicket = () => {
	uni.navigateTo({
		url: '/pages/index/subpages/ticket'
	})
}

const goFood = () => {
	uni.switchTab({
		url: '/pages/food/food'
	})
}

onShow(() => {
	const instance = getCurrentInstance()
	if (instance?.ctx?.$scope?.getTabBar?.()) {
		instance.ctx.$scope.getTabBar().setData({
			selected: 0
		}) // 0 替换为当前页索引
	}
})

onMounted(()=>{
	uni.login({
		provider:'weixin',
		success: (data) => {
			console.log(data);
			api.login({code:data.code}).then(res=>{
				console.log(res);
			})
		}
	})
})
</script>

<style lang="scss" scoped>
.home {
	height: calc(100vh - 150rpx);
	background-image: url('https://zxcxappimg.cxbtv.cn/qinghai/2025/07/12/48619d8575ab697292976bf446d01878.png');
	background-position: top center;
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.top_bar {
		height: var(--status-bar-height);
	}

	.container {
		box-sizing: border-box;
		height: calc(100% - var(--status-bar-height));
		padding: 0 30rpx 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;

		.menu {
			width: 100%;
			height: 310rpx;
			background-color: #eff0ef;
			border-radius: 20px;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			box-sizing: border-box;

			&_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;
			}

			.border {
				border-right: 1px solid #d4d3d4;
			}
		}
	}
}
</style>